<!-- components/PageLayout.vue -->
<template>
  <view class="page-layout">
    <!-- 公共头部 -->
    <CommonHeader v-bind="$attrs" />

    <!-- 内容区域 -->
    <view class="page-content-container" :style="contentStyle">
      <slot />
    </view>
  </view>
</template>

<script setup>
import { computed } from 'vue'
import useSafeArea from '@/composables/useSafeArea'
import CommonHeader from './CommonHeader.vue'

const { safeAreaHeight } = useSafeArea()

const contentStyle = computed(() => ({
  paddingTop: `${safeAreaHeight.value}px`,
  minHeight: `calc(100vh - ${safeAreaHeight.value}px)`
}))
</script>

<style scoped>
.page-layout {
  width: 100%;
  position: relative;
}

.page-content-container {
  width: 100%;
  box-sizing: border-box;
  padding: 0;
}
</style>